{% load i18n %}
{% load static %}
<html>
<head>
    <link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'bootstrap/css/bootstrap-theme.css' %}" rel="stylesheet">
    <link href="{% static 'css/styles.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery-2.1.1.min.js' %}"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/scripts.js' %}"></script>
    <title>{% trans "Main page" %}</title>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="{% if user.userprofile.picture %}{{ user.userprofile.picture.url }}{% else %}/media/profile_images/no_avatar.jpg{% endif %}"
								alt="User Icon" height="20" width="20" class="pull-left">

                    <div class="user-name">
                        <small>{% trans "Hello" %},</small>
                        {{ user }}</div>
                </a>

                <div id="navbar" class="navbar-collapse collapse pull-left">
                    <ul class="nav navbar-nav">
                        <li><a href="/main/">{% trans "Home" %}</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-expanded="false">{% trans "Projects" %} <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li role="presentation"><a role="menuitem" tabindex="-1"
                                                           href="/project/1/add-user">{% trans "Create Project" %}</a>
                                </li>
                                {% for project in projects %}
                                    <li role="presentation"><a
                                            href="/project/{{ project.project.id }}">{{ project.project.title }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-expanded="false">Settings <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li role="presentation"><a role="menuitem" tabindex="-1"
                                                           href="/project/{{ current_project.id }}/add-user">{% trans "Add member" %}</a>
                                </li>
                            </ul>
                        </li>
						<li><a href="/logout/">{% trans "Log out" %}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    {% if messages %}
        {% for message in messages %}
            <p {% if message.tags %} class="alert alert-{{ message.tags }}"{% endif %}>{{ message }}</p>
        {% endfor %}
    {% endif %}
    <div class="row">
        <div class="project_title">
            <ul class="list-group">
                {% for item in data %}
                    <li class="list-group-item">
                      <div class="user-info user-{{ item.user.id}}">
                        <span class="user-name">{{ item.user.first_name }} {{ item.user.last_name }} - {{ item.user.username }}</span>
                        <span class="user-role">{% trans 'User role' %}: {{ item.role }}</span>
						<form class="form-editrole" style="float: right;" id="project_form_{{ item.user.id }}" method="post"
                              action="/new_project/"
                              enctype="multipart/form-data">
                            {% csrf_token %}
                            {{ item.form.user_role }}
                        </form>
                      </div>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>

</div>

</body>
</html>